<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>兄弟/同级选择器(sibling selector)</title>
  <!-- 
    CSS的兄弟选择器（sibling selector）用于选择与指定元素具有相同父元素的其他兄弟元素。
    "+" 符号和 "~" 符号都用于选择同一父元素下的兄弟元素，但它们之间有一些区别： 
 
      1. "+" 符号：表示相邻兄弟选择器，用于选择紧接在指定元素后面的兄弟元素。例如，使用 h2 + p 选择器将选择紧接在 <h2> 元素后面的 <p> 元素。 
      2. "~" 符号：表示通用兄弟选择器，用于选择在指定元素后面的所有兄弟元素。例如，使用 h2 ~ p 选择器将选择所有在 <h2> 元素后面的 <p> 元素。 
      
      总的来说，"+" 符号选择的是紧邻的下一个兄弟元素，而 "~" 符号选择的是指定元素后面的所有兄弟元素。
   -->
   <style>
      /* 无效 */
      .sibling03 + .sibling05 {
       color: red; 
      }

      .sibling03 + div {
       color: red; 
      }

      .sibling03 ~ div {
       font-size: 28px;
      }
   </style>
</head>
<body>
  
  <div class="sibling-selector">
    <div class="sibling01">sibling01</div>
    <div>sibling02</div>
    <div class="sibling03">sibling03</div>
    <div>sibling04</div>
    <div class="sibling05">sibling05</div>
    <div>sibling06</div>
    <p>CSS的兄弟选择器（sibling selector）用于选择与指定元素具有相同父元素的其他兄弟元素。</p>
  </div>

</body>
</html>